<!--
 * @FilePath: ChildrenOne.vue
 * @Author: jack
 * @Date: 2024-05-14 17:03:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-27 16:34:01
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="layer-common-box">
        <div class="tips"><span>*</span> 请选择需要显示的字段<span>（仅支持显示四个荣誉）</span></div>
        <div class="row-center-flex row" :style="index == selelctList.length - 1 ? '' : 'margin-bottom:15px;'"
            v-for="(item, index) in selelctList" :key="index">
            <div class="flexItem" @click="selectItem(item)"
                :class="props.currentItem.content.length == 4 && !item.isSelect ? 'disabled' : ''">
                <SvgIcon :icon-class="item.isSelect ? 'icon-icon_yixuan' : 'icon-icon_weixuan'"
                    :color="item.isSelect ? '#2C68FF' : '#CCCCCC'" size="18px" style="width: 18px;height: 18px;">
                </SvgIcon>
                <div v-html="item.content"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getScreenSettingList, operateScreenSetting, getMaterList } from '../Api/index'
interface PropsType {
    currentItem?: any
    typeId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    currentItem: {},
    typeId: ''
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'getConfig'): void
}
const dataList = ref<any>([])
// 获取可选列表
const selelctList = ref<any>([])
const getSelList = async () => {
    const res: any = await getMaterList({ type_id: props.typeId })
    if (res.code !== 1) return ElMessage.error(res.message)
    if (res.data.length > 0) {
        selelctList.value = res.data[0].content
        selelctList.value.forEach((item: any) => {
            item.isSelect = false
        })
    }
}
// 初始化数据 拿到父级所传过来的数据
// const getinfo = async () => {
//     if (props.currentItem.content && props.currentItem.content.length > 0) {
//         props.currentItem.content = JSON.parse(JSON.stringify(props.currentItem.content))
//     }
// }
watch(
    () => props.typeId,
    async (newValue, oldValue) => {
        await getSelList() // 获取所有可选项
        // await getinfo() // 舒适化数据
        await getInnit() // 数据遍历看哪些数据是已选中的数据
    },
    { deep: true, immediate: true, }
)
// 点击选择
const selectItem = async (item: any) => {
    if (props.currentItem.content.length == 4 && !item.isSelect) return;
    item.isSelect = !item.isSelect
    updataData()
}
// 遍历数据查看那些被选中了，选中的放在新的数组里面
const updataData = async () => {
    props.currentItem.content = []
    selelctList.value.forEach((item: any) => {
        if (item.isSelect) {
            props.currentItem.content.push(item)
        }
    })
}
// 数据匹配，根据选中的id进行匹配
const getInnit = async () => {
    selelctList.value.forEach((item: any) => {
        props.currentItem.content.forEach((items: any) => {
            if (Number(item.id) === Number(items.id)) {
                item.isSelect = true
            }
        })
    })
}
// 添加数据
const submitFrom = async () => {
    const res: any = await operateScreenSetting({ type_id: props.typeId, content: props.currentItem.content })
    if (res.code !== 1) return ElMessage.error(res.message)
    ElMessage.success(res.message)
    refreshChild()
}
const refreshChild = async () => {
    emit('getConfig')
    setTimeout(async () => {
        await getSelList()
        // await getinfo()
        await getInnit()
    }, 500);
}
defineExpose({ submitFrom, refreshChild })
</script>
<style lang="scss" scoped>
.layer-common-box {
    height: calc(100vh - 422px);
    overflow-y: scroll;
    .row-center-flex {

        color: #737A80;
        border-radius: 3px;
        width: 53%;
        min-width: 200px;

        .flexItem {
            width: 100%;
            display: flex;
            align-items: center;
            background: #F0F6FF;
            border-radius: 4px 4px 4px 4px;
            padding: 5px 15px;
            color: #333333;
            cursor: pointer;

            div {
                flex: 1;
                margin-left: 10px;
            }
        }

        .disabled {
            cursor: not-allowed;
        }
    }
}
</style>